<script setup>

import CardBox from "@/components/CardBox/index.vue";
import {Delete, Edit} from "@element-plus/icons-vue";
import {
  addBannerApi,
  deleteBannerApi, detailsBannerApi, getBannerListApi,
  updateBannerApi
} from "@/api/school.js";
import {formatDate} from "@/utils/index.js";
import ImageUpload from "@/components/ImageUpload/index.vue";
import ImagePreview from "@/components/ImagePreview/index.vue";
import {getDicts, updateData} from "@/api/system/dict/data.js";
import bgImage from "@/assets/images/login-background.jpg";
import {ElMessage} from "element-plus";

const {proxy} = getCurrentInstance();

const showDia1 = ref(false)

const data = reactive({
  title: '新增',
  form: {},
  total: 0,
  tableData: [],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  rules: {
    bannerUrl: [{required: true, message: "请上传图片", trigger: "blur"}],
  },
});

const addForm = reactive({
  bannerTitle: '',
  bannerSort: '',
  bannerUrl: '',
  id: '',
})

const state = reactive({
  dict1: "",
  dict2: "",
})

const handleAdd = () => {
  showDia1.value = true
}

const closeDia1 = () => {
  showDia1.value = false
  Object.keys(addForm).forEach(key => {
    addForm[key] = ''
  })
}

const getDataList = async () => {
  const res = await getBannerListApi(data.queryParams)
  if (res.code == 200) {
    data.tableData = res.rows
    data.total = res.total
  }
}

const submitForm = () => {
  proxy.$refs["formRef"].validate(async valid => {
    if (valid) {
      let res;
      if (addForm.id != '') {
        res = await updateBannerApi(addForm)
      } else {
        res = await addBannerApi(addForm)
      }
      if (res.code == 200) {
        proxy.$modal.msgSuccess("操作成功")
      }
      closeDia1()
      await getDataList()
    }
  });
}

const handleDelete = (id) => {
  proxy.$modal.confirm('是否删除该数据？').then(async () => {
    const res = await deleteBannerApi({id})
    if (res.code == 200) {
      proxy.$modal.msgSuccess("删除成功")
    }
    await getDataList()
  })
}

const handleEdit = async (id) => {
  showDia1.value = true
  data.title = '编辑'
  const res = await detailsBannerApi({id})
  if (res.code == 200) {
    addForm.id = res.data.id
    addForm.bannerTitle = res.data.bannerTitle
    addForm.bannerSort = res.data.bannerSort
    addForm.bannerUrl = res.data.bannerUrl
  }
}

const getData1 = async () => {
  const res = await getDicts("lunbo");
  res.data.forEach(item => {

    if (item.dictLabel === "速率") {
      state.dict1 = item.dictValue
    }

    if (item.dictLabel === "显示张数") {
      state.dict2 = item.dictValue
    }

  })
}

const submit = async () => {
  await updateData({dictCode: 106, dictLabel: "速率", dictValue: state.dict1, dictType: "lunbo"})
  await updateData({dictCode: 107, dictLabel: "显示张数", dictValue: state.dict2, dictType: "lunbo"})
  ElMessage.success("修改成功")
}

onMounted(() => {
  getDataList()
  getData1()
})
</script>

<template>
  <div class="outBox">
    <CardBox title="轮播管理">
      <template #btn-cont>
        <el-button type="primary" @click="handleAdd">新建</el-button>
      </template>
      <template #content>
        <el-form ref="queryRef" label-width="auto">
          <el-form-item label="轮播速率(ms)">
            <el-input v-model="state.dict1"/>
          </el-form-item>
          <el-form-item label="显示张数">
            <el-input v-model="state.dict2"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">保存</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="data.tableData" style="width: 100%">
          <el-table-column label="序号" type="index" width="180" align="center"/>
          <el-table-column prop="bannerTitle" label="轮播标题" align="center"/>
          <el-table-column prop="bannerUrl" label="图片" align="center">
            <template #default="scope">
              <ImagePreview :src="scope.row.bannerUrl" width="50px"/>
            </template>
          </el-table-column>
          <el-table-column prop="bannerSort" label="排序" align="center"/>
          <el-table-column prop="createTime" label="创建时间" align="center">
            <template #default="scope">
              {{ formatDate(scope.row.createTime) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template #default="scope">
              <div class="btns">
                <div class="btn">
                  <el-icon color="#152584" @click="handleEdit(scope.row.id)">
                    <Edit/>
                  </el-icon>
                </div>
                <div class="btn" @click="handleDelete(scope.row.id)">
                  <el-icon color="#152584">
                    <Delete/>
                  </el-icon>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageBox">
          <pagination
              v-show="data.total > 0"
              :total="data.total"
              v-model:page="data.queryParams.pageNum"
              v-model:limit="data.queryParams.pageSize"
              @pagination="getDataList"
          />
        </div>
      </template>
    </CardBox>


    <el-dialog
        v-model="showDia1"
        :title="data.title"
        width="500"
        align-center
        :before-close="closeDia1"
    >
      <el-form :model="addForm" ref="formRef" label-width="auto" inline="true" :rules="data.rules">
        <el-form-item label="轮播标题：" prop="bannerTitle">
          <el-input v-model="addForm.bannerTitle"/>
        </el-form-item>
        <el-form-item label="排序：" prop="bannerSort">
          <el-input-number v-model="addForm.bannerSort" :min="1"/>
        </el-form-item>
        <el-form-item label="图片：" prop="bannerUrl">
          <ImageUpload v-model="addForm.bannerUrl" :limit="1"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDia1">取消</el-button>
          <el-button type="primary" @click="submitForm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.content {
  padding: 20px;
}

.btns {
  display: grid;
  justify-content: center;
  grid-template-columns: 20px 20px;
}

.btn {
  cursor: pointer;
}
</style>
